<template>
<div class="div_main_frame" style="text-align:center;margin:0 auto;padding-top:0px" align="center">
<div class="fastweb_div_middle" style="width:1500px;text-align:center;padding-left:20px;padding-right:20px;padding-top:0px">
    <div class="div_main_frame" style="width:100%;float:left;margin:auto;margin-top:0px;">
        <el-form  :inline="true" ref="formRef" :model="form" label-width="70px">
          <el-form-item label="选择日期">
          <el-col :span="30">
            <el-date-picker
              v-model="form.date"
              type="date"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="queryOverall">查询</el-button>
          </el-form-item>
        </el-form>

        <div class="title" style="height:40px;margin:0;padding:0;width:100%;background:#F6E4C3;margin-top:0px;">
            <div class="title-name" style="width:100%;margin:0;padding:0;height:15px;font-size:18px;margin-left:6px;line-height:40px;text-align:left">
                <p style="margin:0"><strong>前3天信息</strong></p>
            </div>
        </div>
        <div class="div_main_frame" style="width:100%;margin:0px;padding:0px;">
            <ViewOverallData :json_data="json_data" />
        </div>
        <div class="title" style="height:40px;margin:0;padding:0;width:100%;background:#F6E4C3">
            <div class="title-name" style="width:100%;margin:0;padding:0;height:15px;font-size:18px;margin-left:6px;line-height:40px;text-align:left">
                <p style="margin:0"><strong>后3天信息</strong></p>
            </div>
        </div>
        <div class="div_main_frame" style="width:100%;margin:0px;padding:0px;">
            <ViewOverallData :json_data="json_data_new" />
        </div>
    </div>
    <!--div class="div_main_frame" style="width:20%;float:left;margin:auto;padding-top:0px;margin-top:0px;">
        <div class="div_main_frame" style="width:100%;float:left;margin:0px;padding:0px;margin-top:0px;padding-top:0px">
            <ViewContinuousData :json_data="json_continuous_data" />
        </div>
    </div-->
       
    <div style="clear:both"></div>
</div>
</div>
<ViewFooter/>
</template>

<script>
import { reactive } from 'vue'
import ViewFooter from '@/components/ViewFooter.vue'
import ViewOverallData from '@/components/ViewOverallData.vue'
import ViewContinuousData from '@/components/ViewContinuousData.vue'
import { getCurrentInstance } from 'vue'
import "@/assets/global.css"
import "@/assets/fastweb.css"

  export default {
    name: 'PageOverall',
    components: {
        ViewFooter,
        ViewOverallData,
        ViewContinuousData
    },
    data() {
      return {
        json_data:[],
        json_data_new:[],
        json_continuous_data:[],
      };
    },
    setup(){
      const form = reactive({
            date: '',
            });
      const host = getCurrentInstance()?.appContext.config.globalProperties.host
      return {form, host}
    },
    methods: {
      queryData(date) {
        var api_url = this.host.concat("/api/display_overall_old?date=").concat(date);
        this.axios.get(api_url)
        .then(response => {
          if((response.status == 200) && (response.data.result == 0)){
            this.json_data = JSON.parse(response.data.data);
          }
        })
        .catch(error => alert("系统错误，请稍后重试"));

        var api_url_new = this.host.concat("/api/display_overall_new?date=").concat(date);
        this.axios.get(api_url_new)
        .then(response => {
          if((response.status == 200) && (response.data.result == 0)){
            this.json_data_new = JSON.parse(response.data.data);
          }
        })
        .catch(error => alert("系统错误，请稍后重试"));

        var api_continuous_url = this.host.concat("/api/display_continuous_overall");
        this.axios.get(api_continuous_url)
        .then(response => {
          if((response.status == 200) && (response.data.result == 0)){
            this.json_continuous_data = JSON.parse(response.data.data);
          }
        })
        .catch(error => alert("系统错误，请稍后重试"));
      },
      queryOverall(){
        this.queryData(this.form.date);
        //var api_url = this.host.concat("/api/market_data_add?title=").concat(this.market_form.title);
      }
    },
    mounted() {
      this.queryData("");
      /*
      var api_url = this.host.concat("/api/display_overall_old");
      this.axios.get(api_url)
      .then(response => {
        if((response.status == 200) && (response.data.result == 0)){
          //this.datas = response.data.data;
          this.json_data = JSON.parse(response.data.data);
        }
      })
      .catch(error => alert("系统错误，请稍后重试"));

      var api_url_new = this.host.concat("/api/display_overall_new");
      this.axios.get(api_url_new)
      .then(response => {
        if((response.status == 200) && (response.data.result == 0)){
          //this.datas = response.data.data;
          this.json_data_new = JSON.parse(response.data.data);
        }
      })
      .catch(error => alert("系统错误，请稍后重试"));

      var api_continuous_url = this.host.concat("/api/display_continuous_overall");
      this.axios.get(api_continuous_url)
      .then(response => {
        if((response.status == 200) && (response.data.result == 0)){
          //this.datas = response.data.data;
          this.json_continuous_data = JSON.parse(response.data.data);
        }
      })
      .catch(error => alert("系统错误，请稍后重试"));*/
    }
  };

var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c2ba86525ff37a3b2dd6cdadb129fdb5";
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hm, s);
</script>